<template>
	<view class="container">
		<map id="map" class="map" :latitude="markers.latitude" :longitude="markers.longitude" scale="15"
			:markers="markers" show-location></map>
		<view class="info-card">
			<image class="thumbnail" src="https://via.placeholder.com/150" />
			<view class="info">
				<text class="title">中国石油加油站</text>
				<text class="address">山阳区人民中路32号</text>
			</view>
			<button class="details-button">详情</button>
		</view>
		<button class="navigate-button">立即导航</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: {
					latitude: 39.91488908,
					longitude: 116.40387397,
					iconPath: '/static/marker.png',
					width: 30,
					height: 30
				},
			};
		},
		onLoad() {
			this.getUserLocation();
		},
		methods: {
			getUserLocation() {
				// 获取用户当前位置
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log(res);
						this.markers.latitude = res.latitude;
						this.markers.longitude = res.longitude;
						// console.log("===========================================");
						// console.log(this.markers);
					},
					fail: (err) => {
						console.error('获取位置失败: ', err);
					}

				});

			}
		}
	};
</script>


<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.map {
		flex: 1;
		width: 100%;
	}

	.info-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.thumbnail {
		width: 150rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.address {
		font-size: 28rpx;
		color: #666;
	}

	.details-button {
		font-size: 28rpx;
		color: #007aff;
	}

	.navigate-button {
		background-color: #007aff;
		color: #fff;
		padding: 20rpx;
		text-align: center;
		font-size: 32rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}
</style>